<template>
  <div class="my_background">
    <el-row>
      <el-col :offset="13" :span="7">
        <el-card style="margin-top: 150px">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <div style="margin-bottom: 50px;font-size: 25px">登陆</div>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>

            <div style="display: flex;justify-content: flex-end">
              <el-button type="text" @click="updatePassword">忘记密码？</el-button>
            </div>

            <el-form-item>
              <el-button style="margin-left: 30%" type="primary" @click="login">登陆</el-button>
              <el-button @click="goRegistry">去注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Registry",
  data() {
    return {
      form: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          {required: true, trigger: 'blur', validator: this.validPhone}
        ],
        password: [
          {required: true, message: '请输入密码'},
          {min: 10, max: 20, message: '密码长度在10-20之间'}
        ]
      }
    }
  }, methods: {
    validPhone(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入电话号码'));
      } else if (!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(value))) {
        callback(new Error('请输入正确的11位手机号码'));
      } else {
        callback();
      }
    },
    updatePassword() {
      this.$router.push({path: '/forgetPassword'});
    },
    login() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$axios.post('/user/login', this.$qs.stringify(this.form)).then(res => {
            if (res.code === 200) {
              this.$handleRouters();
              this.$message({type: 'success', message: '登陆成功!'});
              setTimeout(() => {
                this.$router.push({path: '/index'})
              }, 1000);
            }
          })
        }
      })
    }, goRegistry() {
      this.$router.push({path: '/registry'});
    }
  }
}
</script>

<style scoped>
.my_background {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
